<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Simple Slider 仿音悦台slider</title>
        <link rel="stylesheet" href="http://res.769.com/css/base.css" />
		<style>
		.simple-slider{ position:relative; width:100%}
		.simple-slider-list-wrap{ background:url(yinyuetai/sliderbg.png) repeat-x}
		.simple-slide-list-main{width:800px; height:385px; overflow:hidden; margin:0 auto; position:relative}
		.simple-slider-list li{ position:relative;}
		.description,.shadow{position:absolute; right:20px; top:0; width:235px;height:385px; display:none}
		.shadow{border-left:1px solid #FFF; border-right:1px solid #FFF; background:#000; opacity: .3; filter:alpha(opacity=30);}
		.description{width:195px; padding:20px;}
		.description h2{color:#FF0; font:700 20px/32px 'microsoft yahei'; margin-bottom:20px; text-align:right;}
		.description .summary{color:#FFF; font:400 14px/24px 'microsoft yahei';}
		
		.simple-trigger{background:url(yinyuetai/controlbar.png) repeat-x; height:22px; padding-top:2px; text-align:center;}
		.simple-trigger a{display:inline-block; width:14px; height:7px; border:1px solid #FFF; margin-right:5px; *margin-top:3px}
		.simple-trigger a:hover, .current{background:#FFF}
		
		.simple-prev,.simple-next{position:absolute; top:160px; display:inline-block; width:20px; height:40px;}
		.simple-prev{background:url(yinyuetai/prev.png) no-repeat; left:20px}
		.simple-next{background:url(yinyuetai/next.png) no-repeat; right:20px}
		.simple-prev:hover, .simple-next:hover{top:150px; width:30px; height:60px}
		.simple-prev:hover{background:url(yinyuetai/prevhover.png) no-repeat}
		.simple-next:hover{background:url(yinyuetai/nexthover.png) no-repeat}
		</style>
       </style>
    </head>
    <body>
    <div class="wrap">
    	<div class="simple-slider">
    		<div class="simple-slider-list-wrap">
    			<div class="simple-slide-list-main">
	    		<ul class="simple-slider-list">
	    			<li>
	    				<a href="#"><img src="yinyuetai/45190133599BAA529FB25BA72C5365F8.jpg"/ alt="ooxx"></a>
						<div class="shadow"></div>
						<div class="description">
							<h2>
								独家首发<br/>
								弦子《逆风的蔷薇》
							</h2>				
							<div class="summary">
							 镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
							</div>	
						</div>
					</li>
					<li>
						<a href="#"><img src="yinyuetai/A3D101335D073599F922198A994E2302.jpg"/ alt="ooxx"></a>
						<div class="shadow"></div>
						<div class="description">
							<h2>
								Tablo feat. 太阳<br/>
								《Tomorrow》
							</h2>				
							<div class="summary">
							 镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
							</div>	
						</div>
					</li>
					<li>
						<a href="#"><img src="yinyuetai/FA5001335CE189C8F2112D29E586921C.jpg"/ alt="ooxx"></a>
						<div class="shadow"></div>
						<div class="description">
							<h2>
								音乐大来宾<br/>
								分列进行式 苏醒
							</h2>				
							<div class="summary">
							 镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
							</div>	
						</div>
					</li>
					<li>
						<a href="#"><img src="yinyuetai/A0EC013358E9C2C69BCDD0BF04A5AC9C.jpg"/ alt="ooxx"></a>
						<div class="shadow"></div>
						<div class="description">
							<h2>
								独家首发<br/>
								MIC男团<br/>
								《Get It Hot》
							</h2>				
							<div class="summary">
							 镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
							</div>	
						</div>
					</li>
					<li>
						<a href="#"><img src="yinyuetai/31EC01334A2982F0513F5E9030D505D2.jpg"/ alt="ooxx"></a>
						<div class="shadow"></div>
						<div class="description">
							<h2>
								LADY GAGA<br/>
								时代巨星成名之路
							</h2>				
							<div class="summary">
							 镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
							</div>	
						</div>
					</li>
					<li>
						<a href="#"><img src="yinyuetai/EA72013344B66C5BF0FB4F6285C2101B.jpg"/ alt="ooxx"></a>
						<div class="shadow"></div>
						<div class="description">
							<h2>
								独家首发<br/>
								尚雯婕<br/>
								《擦 好长的歌名》
							</h2>				
							<div class="summary">
							 镜头前他舞跳得帅气利落，新曲走R&B周式曲风曲风，描写分手情人心情的歌词出自周董手笔，，描曲风，描写分手情人心情的歌词出自周董手笔，写分手情人心情的歌词出自周董手笔，他一手包办词曲，周杰伦也请舞蹈老师雪糕特意编了一段“雨伞舞”师雪糕特意编了一段“雨伞舞”。
							</div>	
						</div>
					</li>
	    		</ul>
				</div>
				<a href="javascript:;" class="simple-prev"></a>
				<a href="javascript:;" class="simple-next"></a>
			</div>
    	</div>
    </div>
	<script type="text/javascript" src="../../jquery.js"></script>
	<script type="text/javascript" src="../SimpleCore.js"></script>
	<script type="text/javascript" src="SimpleSlider_v1.1.js"></script>
	<script type="text/javascript">
	var slide = new Simple.Slider({
	    node : $('.simple-slider')[0],
	    content : '.simple-slider-list li',
	    trigger : true,
		prev : '.simple-prev',
		next : '.simple-next',
	    triggerClass : 'simple-trigger',
	    triggerCurrentClass : 'current',
	    delay : 400,
	    speed : 200,
		timeout : 5000,
	    direction : 'left',
		template : '<div simpleEvent="trigger"><s:each><a href="javascript:;"></a></s:each></div>',
		ontrigger : function(index){
			var s = this,el = s.content.eq(index);
			el.find(".shadow").hide();
			el.find(".description").hide();
		},
		ontriggered : function(index){
			var s = this,el = s.content.eq(index);
			el.find(".shadow").fadeIn(1000, function(){
				$(this).css('opacity', '0.3')
			});
			el.find(".description").fadeIn(1000);
		}
	});
	</script>
	</body>
</html>